<template>
  <div class="app-container">
    <div class="search-div">
      <el-form label-width="70px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="关键字">
              <el-input
                style="width: 80%"
                v-model="searchObj.keyword"
                placeholder="请输入用户名或姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="起止时间" label-width="100px">
                <!-- <el-input
                style="width: 95%"
                v-model="searchObj.username"
                placeholder="请输入用户名"
              ></el-input> -->
              <el-date-picker
                v-model="searchtime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd"
                @change="timechange"
                style="margin-right: 10px; width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="角色">
          <el-select
            style="width: 80%"
            v-model="searchObj.roleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="sysUser.role">
                <el-radio v-for="(role, index) in roles" :key="index" :label="role.id">
      {{ role.name }}
    </el-radio>
  </el-radio-group> -->
        </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="部门">
          <el-select
            style="width: 80%"
            v-model="searchObj.deptId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="sysUser1.role">
                <el-radio v-for="(role, index) in roles" :key="index" :label="role.id">
      {{ role.name }}
    </el-radio>
  </el-radio-group> -->
        </el-form-item>
          </el-col>
          
          <el-col :span="4">
            <div>
              <el-button
                class="primary-btn"
                @click="fetchData()"
                >搜索</el-button
              >
              <el-button class="primary-btn"  @click="resetData"
                >清空</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- <el-row style="display:flex">
            <el-button type="primary" icon="el-icon-search"   @click="fetchData()">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="resetData">重置</el-button>
          </el-row> -->
      </el-form>
    </div>

    <!-- 工具条 -->
    <div class="tools-div" style="display: flex">
      <el-button class="custom-success-btn" @click="add"
        >添 加</el-button
      >
      <!-- <el-button class="custom-danger-btn"  @click="deleteselect"
        >删 除</el-button
      > -->
    </div>

    <!-- 列表 
      @selection-change="handleSelectionChange" -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%; margin-top: 10px"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column  align="center"  label="序号" width="70">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column  align="center"  prop="username" label="用户名" width="230" />
      <el-table-column  align="center"  prop="name" label="姓名" width="130" />
      <el-table-column  align="center"  prop="phone" label="手机" width="230" />
      <el-table-column  align="center"  label="状态" width="150">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status == 1"
            @change="switchStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="description" align="center" label="描述" />
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            
            @click="edit(scope.row)"
            title="修改"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            
            @click="removeDataById(scope.row.id)"
            title="删除"
          />
          <!-- <el-button
            type="warning"
            icon="el-icon-baseball"
            
            @click="showAssignRole(scope.row)"
            title="分配角色"
          /> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled :value="sysUser.username"></el-input>
        </el-form-item>

        <el-form-item label="角色列表">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="userRoleIds"
            @change="handleCheckedChange"
          >
            <el-checkbox
              v-for="role in allRoles"
              :key="role.id"
              :label="role.id"
              >{{ role.roleName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="assignRole" 
          >保存</el-button
        >
        <el-button @click="dialogRoleVisible = false" 
          >取消</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="添加" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="dataForm"
        :model="sysUser"
        label-width="100px"
        :rules="rule"
        style="padding-right: 40px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="sysUser.username" />
        </el-form-item>
        <el-form-item v-if="!sysUser.id" label="密码" prop="password">
          <el-input v-model="sysUser.password" type="password" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="sysUser.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="sysUser.phone" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" :rows="3" v-model="sysUser.description" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser.roleId"
            placeholder="请选择"
            @change="rolechange"
          >
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="sysUser.role">
                <el-radio v-for="(role, index) in roles" :key="index" :label="role.id">
      {{ role.name }}
    </el-radio>
  </el-radio-group> -->
        </el-form-item>
        <el-form-item label="部门" v-if="sysUser.roleId == 12"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser.deptId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" v-if="sysUser.roleId == 14"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser.deptId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsnew"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="sysUser.roleId == 3" label="权限">
          <el-cascader
            style="width: 40%"
            :options="options1"
            :props="props"
            v-model="sysUser.can"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          
          icon="el-icon-refresh-right"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="saveOrUpdate()"
          
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisible1" width="40%">
        <el-form
        ref="dataForm1"
        :model="sysUser1"
        label-width="100px"
        :rules="rule"
        style="padding-right: 40px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="sysUser1.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="sysUser1.password" type="text" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="sysUser1.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="sysUser1.phone" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" :rows="3" v-model="sysUser1.description" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser1.roleId"
            placeholder="请选择"
            @change="rolechange1"
          >
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="sysUser1.role">
                <el-radio v-for="(role, index) in roles" :key="index" :label="role.id">
      {{ role.name }}
    </el-radio>
  </el-radio-group> -->
        </el-form-item>
        <el-form-item label="部门" v-if="sysUser1.roleId == 12"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser1.deptId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" v-if="sysUser1.roleId == 14"  style="text-align: left;">
          <el-select
            style="width: 40%"
            v-model="sysUser1.deptId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsnew"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="sysUser1.roleId == 3" label="权限">
          <el-cascader
            style="width: 40%"
            :options="options1"
            :props="props"
            v-model="sysUser1.can"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible1 = false"
          
          icon="el-icon-refresh-right"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="changedata()"
          
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import api from "@/api/system/user";
import roleApi from "@/api/system/role";
import { getrole,getpart,addpeople,getpeople,editpeople,deletepeople } from "@/api/table";
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!value) {
        callback(new Error("电话号码不能为空"));
      } else if (!phoneReg.test(value)) {
        callback(new Error("电话号码格式不正确"));
      } else {
        callback();
      }
    };
    return {
      listLoading: false, // 数据是否正在加载
      list: [], // 列表
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 8, // 每页记录数
      searchObj: {
        keyword: "",
        createTimeBegin: "",
        createTimeEnd: "",
        roleId: null,
        postId: null,
        deptId: null,
      }, // 查询表单对象
      roles: [
        { value: 1, label: "专家个人" },
        { value: 2, label: "各处室" },
        { value: 3, label: "规计处" },
        { value: 4, label: "管理员" },
        { value: 5, label: "领导" },
      ],
      rule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
      },
      options1: [
        {
          value: 1,
          label: "专家库管理权限",
          children: [
            {
              value: 2,
              label: "查询",
            },
            {
              value: 3,
              label: "查看",
            },
            {
              value: 3,
              label: "编辑",
            },
            {
              value: 4,
              label: "出库",
            },
          ],
        },
        {
          value: 5,
          label: "专家抽取管理",
          children: [
            {
              value: 6,
              label: "新增",
            },
            {
              value: 7,
              label: "删除",
            },
            {
              value: 8,
              label: "查询",
            },
            {
              value: 9,
              label: "编辑",
            },
            {
              value: 10,
              label: "专家抽选",
            },
          ],
        },
      ],
      props: { multiple: true },
      createTimes: [],
      optionsnew:[],
      options: [
        {
          value: 1,
          label: "农水处",
        },
      ],
      dialogVisible: false,
      dialogVisible1: false,
      sysUser: {
        roleId: "",
        username: "",
        password: "",
        name: "",
        phone: "",
        deptId: "",
        postId: "",
        parentId:'',
        description: "",
        status: 1,
      },
      sysUser1: {
        roleId: "",
        username: "",
        password: "",
        name: "",
        phone: "",
        parentId:'',
        deptId: "",
        postId: "",
        description: "",
        status: 1,
      },
      multipleSelection: [],
      dialogRoleVisible: false,
      allRoles: [], // 所有角色列表
      userRoleIds: [], // 用户的角色ID的列表
      isIndeterminate: false, // 是否是不确定的
      checkAll: false, // 是否全选
      searchtime:'',
    };
  },
  created() {
    //调用列表方法
    this.getroledata()
    this.getpartdata()
    this.getpeopledata()
    //   this.fetchData()
  },
    methods: {
      getpeopledata() {
        getpeople(this.page, this.limit,this.searchObj).then((res) => {
          console.log(res);
          this.list = res.data.records
          this.total = res.data.total
        })
      },
      getpartdata() {
        getpart().then((res) => {
      console.log(res.data.各中心);
      console.log(res.data.各处室);
      let options = []
      let options1 = []
      for (let i = 0; i < res.data.各处室.length; i++) {
        console.log(res.data.各处室[i].name);
        const params = {
          value: res.data.各处室[i].id,
          label:res.data.各处室[i].name,
        }
        options.push(params)
      }
          this.options = options
          for (let i = 0; i < res.data.各中心.length; i++) {
        console.log(res.data.各中心[i].name);
        const params = {
          value: res.data.各中心[i].id,
          label:res.data.各中心[i].name,
        }
        options1.push(params)
      }
      this.optionsnew = options1


      })
      },
      getroledata() {
        getrole().then((res) => {
      console.log(res.data);
      let options = []
      for (let i = 0; i < res.data.length; i++) {
        console.log(res.data[i].roleName);
        const params = {
          value: res.data[i].id,
          label:res.data[i].roleName,
        }
        options.push(params)
      }
      this.roles = options
      console.log(this.roles);
    })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //展示分配角色
    showAssignRole(row) {
      // this.sysUser = row
      // this.dialogRoleVisible = true
      //  roleApi.getRolesByUserId(row.id).then(response => {
      //   this.allRoles = response.data.allRoles
      //   console.log(this.allRoles)
      //   this.userRoleIds = response.data.userRoleIds
      //   console.log(this.userRoleIds)
      //   this.checkAll = this.userRoleIds.length===this.allRoles.length
      //   this.isIndeterminate = this.userRoleIds.length>0 && this.userRoleIds.length<this.allRoles.length
      // })
    },
      deleteselect() {
        //   console.log(this.multipleSelection);
          if(this.multipleSelection.length==0) {
        this.$message.warning('请选择要删除的记录！')
        return
      }
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //数组
        //   var idList = []
        //   //获取多个复选框对应id，封装到数组里面
        //   // [1,2,3]
        //   for(var i=0;i<this.selectValue.length;i++) {
        //     var obj = this.selectValue[i]
        //     //id值
        //     var id = obj.id
        //     //放到数组里面
        //     idList.push(id)
        //   }
        //   api.batchRemove(idList).then(response => {
        //       //提示
        //       this.$message({
        //         type: 'success',
        //         message: '删除成功!'
        //       });
        //       //刷新
        //       this.fetchData()
        //   })
        })
    },
    /*
      全选勾选状态发生改变的监听
      */
    handleCheckAllChange(value) {
      // value 当前勾选状态true/false
      // // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
      // this.userRoleIds = value ? this.allRoles.map(item => item.id) : []
      // // 如果当前不是全选也不全不选时, 指定为false
      // this.isIndeterminate = false
    },

    /*
      角色列表选中项发生改变的监听
      */
    handleCheckedChange(value) {
      // const {userRoleIds, allRoles} = this
      // this.checkAll = userRoleIds.length === allRoles.length && allRoles.length>0
      // this.isIndeterminate = userRoleIds.length>0 && userRoleIds.length<allRoles.length
    },

    //分配角色
    assignRole() {
      // let assginRoleVo = {
      //   userId: this.sysUser.id,
      //   roleIdList: this.userRoleIds
      // }
      // roleApi.assignRoles(assginRoleVo).then(response => {
      //   this.$message.success(response.message || '分配角色成功')
      //   this.dialogRoleVisible = false
      //   this.fetchData(this.page)
      // })
    },
    //更改用户状态
      switchStatus(row) {
        console.log(row);
        const a = JSON.stringify(row)
        const params = JSON.parse(a)
        if (params.status == 0) {
          params.status = 1
        } else if(params.status == 1) {
          console.log('不为0');
          params.status = 0
        }
        editpeople(params).then((res) => {
          console.log(res);
        if (res.code == 200) {
          this.$message.success('修改成功！')
          this.fetchData()
        }
      })
      //判断，如果当前用户可用，修改禁用
      // row.status = row.status === 1 ? 0 : 1
      // api.updateStatus(row.id,row.status)
      //   .then(response => {
      //     this.$message.success(response.message || '操作成功')
      //     this.fetchData()
      //   })
    },
    //删除
    removeDataById(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletepeople(id).then((res) => {
            console.log(res);
            if (res.code) {
              this.$message.success('删除成功！')
              this.fetchData()
            }
          })
            //调用方法删除
          
        //   api.removeById(id)
        //     .then(response => {
        //       //提示
        //       this.$message({
        //         type: 'success',
        //         message: '删除成功!'
        //       });
        //       //刷新
        //       this.fetchData()
        //   })
        })
    },
    //根据id查询，数据回显
    edit(row) {
      //弹出框
        this.dialogVisible1 = true
      console.log(row);
        const a = JSON.stringify(row)
      this.sysUser1 = JSON.parse(a)
      // //调用接口查询
      // api.getUserId(id)
      //   .then(response => {
      //     this.sysUser = response.data
      //   })
    },
    //添加或者修改方法
    saveOrUpdate() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          //   alert('submit!');
          console.log(this.sysUser);
          this.dialogVisible = false;
          addpeople(this.sysUser).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('添加成功！')
          this.fetchData()
        }
          })
          // this.list.push(this.sysUser);
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // if(!this.sysUser.id) {
      //   this.save()
      // } else {
      //   this.update()
      // }
    },
    //修改
    changedata() {
        console.log(123);
      console.log(this.sysUser1);
        this.dialogVisible1 = false
        editpeople(this.sysUser1).then((res) => {
          console.log(res);
        if (res.code == 200) {
          this.$message.success('修改成功！')
          this.fetchData()
        }
      })
      // api.update(this.sysUser)
      //   .then(response => {
      //     //提示
      //     this.$message.success('操作成功')
      //     //关闭弹框
      //     this.dialogVisible = false
      //     //刷新
      //     this.fetchData()
      //   })
    },
    //添加
    save() {
      // api.save(this.sysUser)
      //   .then(response => {
      //     //提示
      //     this.$message.success('操作成功')
      //     //关闭弹框
      //     this.dialogVisible = false
      //     //刷新
      //     this.fetchData()
      //   })
    },
    //添加弹框的方法
    add() {
      this.dialogVisible = true;
      this.sysUser = {
        roleId: "",
        username: "",
        password: "",
        name: "",
        phone: "",
        deptId: "",
        postId: "",
        description: "",
        status: 1,
      };
    },
    // 重置查询表单
    resetData() {
      console.log("重置查询表单");
      this.searchObj = {
        keyword: "",
        createTimeBegin: "",
        createTimeEnd: "",
        roleId: "",
        postId: "",
        deptId:"",
      }
    //   this.createTimes = [];
      // this.fetchData()
      },
      timechange() {
        // console.log(this.searchObj.createTimeBegin);
        this.searchObj.createTimeEnd  = this.searchtime[1]
        this.searchObj.createTimeBegin = this.searchtime[0]
        // ·
      },
      rolechange(val) {
        console.log(val);
        if (val == 1 || val == 2 || val == 13) {
          this.sysUser.deptId = 11
        } else if (val == 8) {
          this.sysUser.deptId = 1
          
        }
        if (val == 12) {
          this.sysUser.parentId = 0
        }
        if (val == 14) {
          this.sysUser.parentId = 1
        }
      },
      rolechange1(val) {
        console.log(val);
        if (val == 1 || val == 2 || val == 13) {
          this.sysUser1.deptId = 11
        }
        if (val == 12) {
          this.sysUser1.parentId = 0
        }
        if (val == 14) {
          this.sysUser1.parentId = 1
        }
      },
    //列表
      fetchData(page = 1) {
        // console.log(this.searchObj);
        getpeople(page, this.limit,this.searchObj).then((res) => {
          console.log(res);
          this.list = res.data.records
          this.total = res.data.total
        })
      // this.page = page
      // if(this.createTimes && this.createTimes.length==2) {
      //   this.searchObj.createTimeBegin = this.createTimes[0]
      //   this.searchObj.createTimeEnd = this.createTimes[1]
      // }
      // api.getPageList(this.page,this.limit,this.searchObj)
      //   .then(response => {
      //     this.list = response.data.records
      //     this.total = response.data.total
      //   })
    },
  },
};
</script>
  <style lang="scss" scoped>
.tools-div {
  text-align: left;
  margin-left: 2%;
}
.custom-success-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(29, 183, 82, 0.74);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #1DB752;
    border-radius: 0.3125rem;
    color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  }
  &:active {
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
  }
}
.custom-danger-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(225, 63, 31, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);
  &:hover,
  &:focus {
    background: #E13F1F;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-primary-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(45, 107, 164, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #2D6BA4;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.custom-info-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(31, 193, 189, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1FC1BD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}

.custom-warning-btn {
  width: 6.0625rem;
  height: 2.5rem;
  background-color: rgba(26, 127, 221, 0.7);
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.35);

  &:hover,
  &:focus {
    background: #1A7FDD;
    border-radius: 0.3125rem;
    color: #fff;
  }
}
.primary-btn{
  width: 6.0625rem;
  height: 2.5rem;
  background-color: #205382;
  border-radius: 0.3125rem;
  color: #fff;
  font-size: 1rem;
}
</style>